
<template>
	<div>
		<el-row justify="center">
		    <el-col :span="22">
				<el-input placeholder="请输入内容" v-model.lazy.trim="book"/>
			</el-col>
			<el-col :span="1">
				<el-button type="primary" style="margin-left: 10px;" @click="queryBooks()">查找</el-button>
			</el-col>
		</el-row>
		<el-container>
			<el-aside width="280px">
				<el-menu unique-opened style="height: 100vh;">
					<el-menu-item index="0" @click="getBooks(0)">
					  <el-icon><expand /></el-icon>
					  <span>所有商品</span>
					</el-menu-item>
					<!-- 循环生成菜单 -->
					<template v-for="(item,index) in newMenus">
						<!-- 含有二级菜单 -->
						<template v-if="item.child">
							<el-sub-menu :index="index+'-0'" :key="index">
								<!-- 一级菜单名称 -->
							  <template #title>
								<el-icon><folder-opened /></el-icon>
								<span>{{item.type}}</span>
							  </template>
							  <!-- 循环生成二级菜单 -->
								<el-menu-item  v-for="(child,j) in item.child" 
									:index="index+'-'+j" :key="j" @click="getBooks(child.id)">
								<el-icon><ice-tea /></el-icon>{{child.type}}</el-menu-item>
							</el-sub-menu>
						</template>
						<!-- 无二级菜单 -->
						<template v-else>
							<el-menu-item :index="index+'-0'" :key="index" @click="getBooks(item.id)">
							  <el-icon><notebook /></el-icon>
							  <span>{{item.type}}</span>
							</el-menu-item>
						</template>
					</template>
			    </el-menu>
			</el-aside>
			<el-main>
				<div class="item-list">
					<ul class="book-box">
						<li class="book-item" 
							v-for="item in books.books" :key="item.id"
							@mouseenter="showID='1-'+item.id" @mouseleave="showID=0">
							<aside>
								<img :src="`${$ServerUrl}/api/public/showImg/${item.picture}`" >
							</aside>
							<article class="book-info" v-if="showID=='1-'+item.id"> 
								<span>{{item.author}}</span>
								<span>出处：{{item.publisher}}</span>
							</article>
							<label>{{item.name}}</label>
							<section @click="addCart(item.id)">
								<strong v-if="showID=='1-'+item.id">加入购物车</strong>
								<strong v-else>￥{{item.price}}</strong>
							</section>
						</li>
					</ul>
					<el-row justify="center">
						<el-pagination background layout="prev, pager, next" style="margin-top: 10px;"
						  :total="total"
						  :page-size="num"
						  hide-on-single-page
						  v-model:currentPage="page">
						</el-pagination>
					</el-row>
				</div>
				
			</el-main>
			
		</el-container>
	</div>
</template>

<script>
import {mapGetters} from 'vuex';
import { ElMessage } from 'element-plus';
import {Notebook,Expand,FolderOpened,IceTea} from '@element-plus/icons-vue';
export default{
	name:'Details',
	components:{Notebook,Expand,FolderOpened,IceTea},
	data(){
		return {
			id:0,//当前操作ID
			isquery:false,//是否为查询状态
			total:0,
			num:12,//每页数量
			page:1,//当前页码
			book:'',
			types:[],
			newMenus:[],
			books:[],
			showID:'0',//当前观看商品的ID
		}
	},
	computed:{
		...mapGetters(['hasOnline']),
	},
	methods:{
		//查询书本
		queryBooks(){
			if(!this.book)return false;
			if(!this.isquery){
				this.page = 1;
				this.isquery = true;
			}
			this.axios.post('/api/public/book/findIf/'+(this.page-1)+'/'+this.num,"key="+this.book).then((res)=>{
				this.books = res.data.data;
				this.total = res.data.data.total;
			}).catch((err)=>{
				//console.log(err);
			});
		},
		//获取指定类型的书本
		getBooks(id){
			this.id = id;
			this.getBookData();
		},
		//请求获取类型书籍
		getBookData(){
			//上次状态为查询指定书籍，将页码设置1，取消查询状态
			if(this.isquery){
				this.page = 1;
				this.isquery = false;
			}
			this.axios.get('/api/public/findBookByPage/'+(this.page-1)+'/'+this.num+'/'+this.id).then((res)=>{
				this.books = res.data.data;
				this.total = res.data.data.total;
			}).catch((err)=>{
				//console.log(err);
			});
		},
		//添加到购物车
		addCart(id){
			//验证是否已登录
			if(!this.hasOnline){
				ElMessage.error({
					message: '添加失败,请先登录账户！'
				})
			}else{
				//提交数据
				this.axios.get('/api/public/addCart/'+id).then((res)=>{
					ElMessage({type:'success',message: res.data.msg})
				}).catch((err)=>{
					console.log(err)
				})
			}
		},
		//菜单格式化
		getMenu(id,arr){
			if(id===0){
				//第一级菜单
				this.types.forEach(item=>{
					if(item.pid===0){
						arr.push(item)
					}
				})
				//再第一级菜单完成之后，从第一级的第一个菜单进入
				this.getMenu(this.newMenus[0].id,this.newMenus)
			}else{
				//其他他等级的菜单
				//1.循环等级数组，给每个第一级找到第二级
				arr.forEach((item,i)=>{
					//2.将list整个循环，将每一条数据都给等级作比较
					this.types.forEach((val,k)=>{
						//判断父级的id === 数据的pid
						if(item.id === val.pid){
							//声明一个下一维度的数组
							if(!item.child)item.child = [];
							item.child.push(val);
						}
					})
					//console.log(666,item.child);
					if(item.child){
						this.getMenu(1,item.child);
					}
					if(i>this.newMenus.length){
						//终止程序
						throw Error();
					}
				})
			} 
		},
	},
	created() {
		//获取商品类型
		this.axios.get('/api/public/type/findAll2').then((res)=>{
			this.types = res.data.data;
			this.getMenu(0,this.newMenus)
		}).catch((err)=>{
			//console.log(err);
		});
		this.book = this.$route.query.q;
		if(this.book!=''){
			this.queryBooks();
		}
	},
	watch:{
		page(){
			if(this.isquery){
				this.queryBooks();//查询图书
			}else{
				this.getBookData();//按照类型获取图片
			}
		}
	}
}
</script>

<style scoped>
/* 右侧图片列表区域 */
.item-list{
	width: 100%;
	height: 90vh;
	background-color: #f4f4f4;
}
.book-box{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}
.book-box li{
	position: relative;
}
.book-item{
	margin: 20px 25px;
	min-width: 180px;
	max-width: 200px;
	width: auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 10px;
	box-shadow: 0 0 10px #19324B;
	padding-bottom: 75px;
	position: relative;
}
.book-item aside{
	width: 100%;
	height: 160px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.book-item img{
	height: 90%;
	margin: 0 auto;
}
.book-item label{
	position: absolute;
	left: 5%;
	width: 90%;
	margin: 0 auto;
	text-align: center;
	display: block;
	bottom: 40px;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	line-height: 25px;
	font-size: 15px;
	padding-bottom: 5px;
}
.book-item section{
	position: absolute;
	cursor: pointer;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 40px;
	line-height: 40px;
	background-color: #ffc6be;
	color: #ff0000;
}
.book-item section:hover{
	color: white;
	background-color: #ff5500;
}
.book-info{
	position: absolute;
	width: 100%;
	height: 160px;
	background: linear-gradient(180deg,rgba(0,0,0,0.2),rgba(0,0,0,0.5));
	backdrop-filter:blur(5px);
}
.book-info span{
	display: block;
	width: 100%;
	font-size: 16px;
	text-align: center;
	line-height: 50px;
	font-weight: bold;
	color: white;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.book-info span:first-child{
	margin-top: 25px;
}
</style>
